<template>
	<view class="CommonMateriaHint" :style="{ paddingTop: paddingTop }">
		<view class="CommonMateriaHint-main">
			<image :src="hintBgImageUrl" />
		</view>

		<view class="CommonMateriaHint-label">
			{{ hintLabel }}
		</view>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';

const hintBgImageUrl = Object.freeze(`${defaultImageUrl}image/img_nopic.png`);

export default {
	name: 'CommonMateriaHint',

	props: {
		top: {
			type: [Number, String],
			default: 48
		},

		hintLabel: {
			type: String,
			default: '你还没有添加图片或视频，赶紧去添加吧～'
		}
	},

	data() {
		return {
			hintBgImageUrl
		};
	},

	computed: {
		paddingTop() {
			const { top } = this;

			return isNaN(top) ? top : `${uni.upx2px(top)}px`;
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.CommonMateriaHint {
	&-main {
		display: flex;
		justify-content: center;

		image {
			width: 480rpx;
			height: 320rpx;
		}
	}

	&-label {
		color: #666;
		text-align: center;

		font-size: 26rpx;
		line-height: 36rpx;
		margin-top: 40rpx;
	}
}
</style>
